<template>
  <div class="app-container">
    <!-- 查詢和其他操作 -->
    <div class="filter-container">

      <el-button v-permission="['GET /admin/hotSellingGoods/goodslist']" class="filter-item" type="primary" icon="el-icon-edit" @click="handleFilter">选择商品</el-button>

    </div>

    <!-- 查詢結果 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="正在查詢中。。。"
      border
      fit
      highlight-current-row
    >

      <el-table-column align="center" label="编号" prop="id" />

      <el-table-column align="center" min-width="100" label="商品名称" prop="goodsName" />

      <el-table-column align="center" label="是否推荐" prop="enable">
        <template slot-scope="scope">
          <!-- <el-tag
            :type="scope.row.enable == 0 ? 'error' : 'success' "
          >{{ scope.row.enable == 0 ? '未推荐' : '已推荐' }}</el-tag> -->
          <el-switch
            v-model="scope.row.enable"
            active-color="#13ce66"
            inactive-color="#dcdfe6"
            @change="changeStatus(scope.row)"
          >></el-switch>
        </template>
      </el-table-column>
      <!--<el-table-column align="center" label="副標題" prop="subheading" />-->

      <el-table-column align="center" label="排序" prop="sort" />

      <el-table-column align="center" label="状态" prop="states">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.states == 0 ? 'error' : 'success' "
          >{{ scope.row.states == 0 ? '未推荐' : '已推荐' }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="200" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-permission="['POST /admin/hotSellingGoods/updatememberoffer']" type="primary" size="mini" @click="handleUpdate(scope.row)">设置排序</el-button>
          <el-button v-permission="['GET /admin/hotSellingGoods/deletedmemberoffer']" type="danger" size="mini" @click="handleDelete(scope.row)">刪除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
    <!-- 设置排序 -->
    <el-dialog :visible.sync="replyFormVisible" title="排序">
      <el-form ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
        <el-form-item label="排序" prop="content">
          <el-input v-model="dataForm.sort" type="text" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="replyFormVisible = false">取消</el-button>
        <el-button type="primary" @click="reply">确定</el-button>
      </div>
    </el-dialog>
    <!-- 选择商品 -->
    <el-dialog :visible.sync="show" title="选择商品">
      <!-- <el-select v-model="selectid" style="margin-bottom:10px">
        <el-option value="1" label="热销推荐"></el-option>
        <el-option value="2" label="限定优惠"></el-option>
        <el-option value="3" label="人气推荐"></el-option>
        <el-option value="4" label="会员升级优惠"></el-option>
      </el-select> -->
      <el-table
        v-loading="listLoading1"
        :data="list1"
        element-loading-text="正在查詢中。。。"
        border
        fit
        highlight-current-row
        @selection-change="handleSelectionChange"
      >

        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column align="center" min-width="100" label="商品名称" prop="name" />

        <el-table-column align="center" label="商品编号" prop="goodsSn" />

        <el-table-column align="center" label="价格" prop="retailPrice" />

      </el-table>

      <pagination
        v-show="total1>0"
        :total="total1"
        :page.sync="listQuery1.page"
        :limit.sync="listQuery1.limit"
        @pagination="getList1"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="show = false">取消</el-button>
        <el-button type="primary" @click="reply1">确定</el-button>
      </div>
    </el-dialog>
    <el-tooltip placement="top" content="返回頂部">
      <back-to-top :visibility-height="100" />
    </el-tooltip>
  </div>
</template>

<style>
.table-expand {
  font-size: 0;
}
.table-expand label {
  width: 100px;
  color: #99a9bf;
}
.table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
}
.gallery {
  width: 80px;
  margin-right: 10px;
}
.goods-detail-box img {
  width: 100%;
}
</style>

<script>
import { hotlist, updatehot, hotgoodslist, setIsEnableByList, hotdeleted, querymemberofferList } from '@/api/goods'
import BackToTop from '@/components/BackToTop'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

export default {
  name: 'Hot',
  components: { BackToTop, Pagination },
  data() {
    return {
      show: false,
      list: [],
      list1: [],
      arr: [],
      total: 0,
      total1: 0,
      replyFormVisible: false,
      replyFormVisible1: false,
      listLoading: true,
      listLoading1: true,
      listQuery: {
        page: 1,
        limit: 20,
        goodsSn: undefined,
        name: undefined,
        sort: 'add_time',
        order: 'desc',
        queryId: '4'
      },
      listQuery1: {
        page: 1,
        limit: 20,
        goodsSn: undefined,
        name: undefined,
        sort: 'add_time',
        order: 'desc'
      },
      dataForm: {
        id: undefined,
        goodid: undefined,
        enable: undefined,
        states: undefined,
        sort: undefined,
        states: undefined
      },
      goodsDetail: '',
      detailDialogVisible: false,
      downloadLoading: false,
      selectid: '1'
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleSelectionChange(val) {
      console.log(val)
      var arr = []
      for (var i = 0; i < val.length; i++) {
        arr.push(val[i].id)
      }
      console.log(arr)
      this.arr = arr
    },
    getList() {
      this.listLoading = true
      querymemberofferList(this.listQuery)
        .then((response) => {
          this.list = response.data.data.list
          this.total = response.data.data.total
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    getList1() {
      this.listLoading1 = true
      hotgoodslist(this.listQuery1)
        .then((response) => {
          this.list1 = response.data.data.list
          this.total1 = response.data.data.total
          this.listLoading1 = false
        })
        .catch(() => {
          this.list1 = []
          this.total1 = 0
          this.listLoading1 = false
        })
    },
    reply() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          updatehot(this.dataForm)
            .then(() => {
              for (const v of this.list) {
                if (v.id === this.dataForm.id) {
                  const index = this.list.indexOf(v)
                  this.list.splice(index, 1, this.dataForm)
                  break
                }
              }
              this.replyFormVisible = false
              this.$notify.success({
                title: '成功',
                message: '更新广告成功'
              })
            })
            .catch(response => {
              this.$notify.error({
                title: '失败',
                message: response.data.errmsg
              })
            })
        }
      })
    },
    reply1() {
      var arr = this.arr
      setIsEnableByList({ ids: arr, selectvalue: 4 }).then((e) => {
        console.log(e)
        this.show = false
      })
      this.getList()
    },
    handleFilter() {
      this.show = true
      this.getList1()
    },
    handleCreate() {
      this.$router.push({ path: '/goods/create' })
    },
    handleUpdate(row) {
      this.dataForm = Object.assign({}, row)
      this.dialogStatus = 'update'
      this.replyFormVisible = true
      // this.$nextTick(() => {
      //   this.$refs['dataForm'].clearValidate()
      // })
    },
    showDetail(detail) {
      this.goodsDetail = detail
      this.detailDialogVisible = true
    },
    handleDelete(row) {
      hotdeleted({ id: row.id })
        .then((response) => {
          this.$notify.success({
            title: '成功',
            message: '刪除成功'
          })
          this.getList()
        })
        .catch((response) => {
          this.$notify.error({
            title: '失敗',
            message: response.data.errmsg
          })
        })
    },
    changeStatus: function(row) {
      updatehot(row)
        .then((response) => {
          this.$notify.success({
            title: '成功',
            message: '操作成功'
          })
          this.getList()
        })
        .catch((response) => {
          this.$notify.error({
            title: '失敗',
            message: response.data.errmsg
          })
        })
    },
    changeIsHot: function(row) {
      editGoodsSale({ id: row.id, isHot: row.isHot })
        .then((response) => {
          this.$notify.success({
            title: '成功',
            message: '操作成功'
          })
          this.getList()
        })
        .catch((response) => {
          this.$notify.error({
            title: '失敗',
            message: response.data.errmsg
          })
        })
    }
  }
}
</script>
